<template>
	<view class="c-container no-border c-container-item">
		<swiper :style="{ height: swiperHeight + 'px' }" :indicator-dots="true">
			<swiper-item v-for="(item, index) in hotelProtocol" :key="index">
				<view class="swiper-item-box" :id="`hotel-protocol-${index}`">
					<view class="c-row">
						<view class="c-row-col">
							<view class="col-title">审核状态</view>
							<view class="col-text" :style="{ color: status[item.item_check_status].color }">{{ status[item.item_check_status].title }}</view>
						</view>
						<view class="c-row-col">
							<view class="col-title">协议类型</view>
							<view class="col-text col-text-nowrap">{{ item.protocol_type }}</view>
						</view>
					</view>
					<view class="c-row c-row-wrap">
						<view class="c-row-col">
							<view class="col-title">桌数</view>
							<view class="col-text col-text-nowrap">{{ item.table_amount }}</view>
						</view>
						<view class="c-row-col">
							<view class="col-title">餐标</view>
							<view class="col-text col-text-nowrap">{{ item.table_price }}</view>
						</view>
					</view>

					<view class="c-row c-row-wrap" v-if="item.earnest_money > 0 || item.earnest_money_date">
						<view class="c-row-col">
							<view class="col-title">定金金额</view>
							<view class="col-text col-text-nowrap">{{ item.earnest_money }}</view>
						</view>
						<view class="c-row-col">
							<view class="col-title">收款时间</view>
							<view class="col-text col-text-nowrap">{{ item.earnest_money_date }}</view>
						</view>
					</view>

					<view class="c-row c-row-wrap" v-if="item.middle_money > 0 || item.middle_money_date">
						<view class="c-row-col">
							<view class="col-title">中款金额</view>
							<view class="col-text col-text-nowrap">{{ item.middle_money }}</view>
						</view>
						<view class="c-row-col">
							<view class="col-title">收款时间</view>
							<view class="col-text col-text-nowrap">{{ item.middle_money_date }}</view>
						</view>
					</view>

					<view class="c-row c-row-wrap" v-if="item.tail_money > 0 || item.tail_money_date">
						<view class="c-row-col">
							<view class="col-title">尾款金额</view>
							<view class="col-text col-text-nowrap">{{ item.tail_money }}</view>
						</view>
						<view class="c-row-col">
							<view class="col-title">收款时间</view>
							<view class="col-text col-text-nowrap">{{ item.tail_money_date }}</view>
						</view>
					</view>

					<view class="hs-table mt8 mb8" v-if="emptyItems(item)">
						<view class="hs-table-row">
							<view class="hs-table-col title">项目</view>
							<view class="hs-table-col">数量</view>
							<view class="hs-table-col">价格</view>
						</view>
						<view class="hs-table-row" v-if="item.wedding_room > 0 || item.wedding_room_amount > 0">
							<view class="hs-table-col title">婚房</view>
							<view class="hs-table-col">{{ item.wedding_room_amount }}</view>
							<view class="hs-table-col">{{ item.wedding_room }}</view>
						</view>
						<view class="hs-table-row" v-if="item.part > 0 || item.part_amount > 0">
							<view class="hs-table-col title">车位</view>
							<view class="hs-table-col">{{ item.part_amount }}</view>
							<view class="hs-table-col">{{ item.part }}</view>
						</view>
						<view class="hs-table-row" v-if="item.tea_amount > 0 || item.tea > 0">
							<view class="hs-table-col title">茶歇</view>
							<view class="hs-table-col">{{ item.tea_amount }}</view>
							<view class="hs-table-col">{{ item.tea }}</view>
						</view>
						<view class="hs-table-row" v-if="item.champagne_amount > 0 || item.champagne > 0">
							<view class="hs-table-col title">香槟</view>
							<view class="hs-table-col">{{ item.champagne_amount }}</view>
							<view class="hs-table-col">{{ item.champagne }}</view>
						</view>
						<view class="hs-table-row" v-if="item.cake_amount > 0 || item.cake > 0">
							<view class="hs-table-col title">糕点</view>
							<view class="hs-table-col">{{ item.cake_amount }}</view>
							<view class="hs-table-col">{{ item.cake }}</view>
						</view>
						<view class="hs-table-row" v-if="item.led_amount > 0 || item.led > 0">
							<view class="hs-table-col title">LED</view>
							<view class="hs-table-col">{{ item.led_amount }}</view>
							<view class="hs-table-col">{{ item.led }}</view>
						</view>
					</view>

					<view class="hs-table mt8 mb8" v-if="item.addons && item.addons.length">
						<view class="hs-table-row">
							<view class="hs-table-col title">项目</view>
							<view class="hs-table-col">数量</view>
							<view class="hs-table-col">价格</view>
							<view class="hs-table-col">小计</view>
						</view>
						<view class="hs-table-row" v-for="(addon,index) in item.addons" :key="index">
							<view class="hs-table-col title">{{ addon.title }}</view>
							<view class="hs-table-col">{{ addon.amount }}</view>
							<view class="hs-table-col">{{ addon.price }}</view>
							<view class="hs-table-col">{{ addon.total }}</view>
						</view>
					</view>

					<view class="c-row" v-if="item.remark">
						<view class="c-row-col">
							<view class="col-title">备注</view>
							<view class="col-text col-remark">{{ item.remark }}</view>
						</view>
					</view>
					<view class="c-row" v-if="item.images.length > 0">
						<view class="c-row-col">
							<view class="col-title">附件列表</view>
							<view class="col-text col-text-img-box">
								<image
									class="col-img"
									v-for="(img, imgIndex) in item.images"
									:key="imgIndex"
									:src="img"
									@click="previewImg({ list: item.images, index: imgIndex })"
								></image>
							</view>
						</view>
					</view>
					
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import { getSwiperMaxHeight } from '@/utils/funs.js';
export default {
	props: {
		parent: {
			type: Object
		},
		hotelProtocol: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			swiperHeight: 0,
			status: {
				0: {
					title: '待审核',
					color: '#999'
				},
				1: {
					title: '审核中',
					color: '#999'
				},
				2: {
					title: '审核通过',
					color: '#409EFF'
				},
				3: {
					title: '审核驳回',
					color: 'red'
				},
				13: {
					title: '已撤销',
					color: '#999'
				}
			}
		};
	},
	beforeMount() {
		this.getSwiperMaxHeight = getSwiperMaxHeight;
	},
	mounted() {
		let hotelProtocol = this.hotelProtocol;
		hotelProtocol.forEach((ele, index) => {
			let id = `#hotel-protocol-${index}`;
			this.getSwiperMaxHeight(this, id);
		});
	},
	methods: {
		// 预览图片
		previewImg(data) {
			uni.previewImage({
				urls: data.list,
				current: data.index
			});
		},
		emptyItems(data) {
			let keys = [
				'wedding_room',
				'wedding_room_amount',
				'tea',
				'tea_amount',
				'cake',
				'cake_amount',
				'led',
				'led_amount',
				'champagne',
				'champagne_amount',
				'part',
				'part_amount'
			];

			let isEmpty = false;
			isEmpty = keys.find(row => data[row] > 0);

			return isEmpty;
		}
	}
};
</script>

<style lang="less">
@import url('../../common.less');

.swiper-item-box {
	height: auto;
}
</style>
